<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>销售管理</title>
    <script src="/aaa/jq/jquery-3.3.1.min.js"></script>
    <script src="/aaa/jq/jquery-form.js"></script>
    <link rel="stylesheet" href="/aaa/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/aaa/layuiadmin/style/admin.css" media="all">


</head>

<body>
<div class="layui-fluid">
    <div class="layui-card">
        <!--搜索栏-->
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">

                <div class="layui-inline">
                    <label class="layui-form-label">用户号码</label>
                    <div class="layui-input-block">
                        <input type="text" name="telephone" id="telephone" placeholder="请输入" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">订单号</label>
                    <div class="layui-input-block">
                        <input type="text" name="expenseorder" id="expenseorder" placeholder="请输入" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">消费类型</label>
                    <div class="layui-input-block">
                        <input type="text" name="expensetype" id="expensetype" placeholder="请输入" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">操作员编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="employeeid" id="employeeid" placeholder="请输入操作员编号" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <!--搜索,重置按钮-->
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                    <button class="layui-btn" id="resets">重置</button>
                </div>

                <!--添加新订单按钮-->
                <div class="layui-inline">
                    <button class="layui-btn" id="addMarketManage">添加新订单</button>
                </div>


            </div>
        </div>

        <div class="layui-card-body">
            <!--主页面数据表-->
            <table class="layui-hide" id="marketManage" lay-filter="employee-filter"></table>
            <!--数据 操作栏-->
            <script type="text/html" id="marketManage-bar">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="marketManage-detail">详情</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="marketManage-del">删除</a>
            </script>

            <script type="text/html" id="marketManage-bar2">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="marketManage-detail">详情</a>
            </script>
        </div>
    </div>
</div>



<!-- 详情弹出框   id="detailMarketManage" -->
<div id="detailMarketManage" style="display: none;">
    <table class="layui-hide" id="detailMarketForm" lay-filter="detailMarketForm"></table>
</div>

<!-- 添加数据弹出框   id="addMarketManage" -->
<div id="addMarketManagePop" style="display: none;">

    <form id="addlMarketForm" class="layui-form" lay-filter="addMarketForm">
       <div class="layui-form-item">
           <div class="layui-inline">
                <label class="layui-form-label">订单号</label>
                <div class="layui-input-inline">
                    <input type="text" name="expenseorderAdd" id="expenseorderAdd"
                           lay-verify="required" autocomplete="off"
                           class="layui-input" readonly="readonly" >
                </div>
           </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" name="telephoneAdd" id="telephoneAdd"
                       lay-verify="required|phone|number"
                       autocomplete="off" class="layui-input" placeholder="请输入手机号">
            </div>
        </div>
        <div class="layui-inline" id="goodsSelectBox">
            <label class="layui-form-label">商品</label>
            <div class="layui-input-inline">
                <select name="goodsTypeAddList" id="goodsTypeAddList" lay-filter="goodsTypeAddList" lay-search=""
                        style="width: 100px;">
                    <option value="0">商品</option>
                    <option value="1">电瓶车</option>
                    <option value="2">配件</option>
                    <option value="3">电瓶车零件</option>
                </select>
            </div>

        </div>


        <!--学校库存显示框-->
        <table class="layui-table" id="entrepotGoods" lay-filter="entrepotGoods"></table>

        <!--总金额框-->
         <div class="layui-form-item">
            <label class="layui-form-label">消费金额</label>
            <div class="layui-input-inline">
                <input type="text" name="expensecostAdd" id="expensecostAdd"
                       lay-verify="required" autocomplete="off"
                       class="layui-input" readonly="readonly" placeholder="元">
            </div>
        </div>
        <!--<script type="text/html" id="goodsNumber">
           &lt;!&ndash; <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="minGoodsNum">-</a>
            <input type="text" name="goodsquantity" class="aa" id="goodsquantity"
                   lay-verify="required"  value="1" style="width: 30px;">
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="maxGoodsNum">+</a>&ndash;&gt;
        </script>-->

        <!--按钮-->
        <button class="layui-btn layui-hide" lay-submit id="addSubmit"
                lay-filter="addSubmit">提交
        </button>
        <button class="layui-btn layui-hide" lay-submit id="noAddSubmit"
                lay-filter="noAddSubmit">取消
        </button>
    </form>

</div>

<script src="/aaa/layuiadmin/layui/layui.js"></script>


<!--下拉列表模板-->
<script type="text/html" id="goodsOpt">
    <option value="">商品</option>
    {{#  layui.each(d, function(index, item){ }}
    <option value="{{item.goodsname}}" name="xm-goodsList">{{item.goodsname}}</option>
    {{#  }); }}

</script>
<script type="text/html" id="carsOpt">
    <option value="">车型</option>
    {{#  layui.each(d, function(index, item){ }}
    <option value="{{item.goodsname}}">{{item.goodsname}}</option>
    {{#  }); }}
</script>

<!--添加订单 商品数量 加减框 模板-->
<script type="text/html" id="goodsNumber">
    <a href='javascript:;' class="layui-btn layui-btn-danger layui-btn-xs" onclick='minGoodsNum("{{d.id}}","{{d.goodsquantity}}","{{d.goodscost}}")'>-</a>
    <input type="text" name="goodsNumber" class="aa" id="goodsNumber{{d.id}}"
           lay-verify="required"  value="0" style="width: 30px;align-items: center;" onblur='numJudge("{{d.id}}","{{d.goodsquantity}}")'>
    <a href='javascript:;' class="layui-btn layui-btn-danger layui-btn-xs" onclick='maxGoodsNum("{{d.id}}","{{d.goodsquantity}}","{{d.goodscost}}")'>+</a>
</script>
<!--添加订单 商品价格 显示模板-->
<script type="text/html" id="cost">
    <input type="text" name="cost" id="cost{{d.id}}"
           lay-verify="required"  value="0" style="border: none;width: 50px;align-items: center;" readonly="readonly">

</script>

<script th:inline="none">

    /*减号 点击事件*/
   function minGoodsNum(id,goodsquantity,goodscost){
       var num=parseInt($("#goodsNumber"+id).val());

       if(num>0){
          num--;
          $("#goodsNumber"+id).val(num);
          var costs=num*goodscost;
          $("#cost"+id).val(costs);
       }else {
           alert("最小值只能为0");
       }

   }
   /*加号 点击事件*/
   function maxGoodsNum(id,goodsquantity,goodscost){
       var num=parseInt($("#goodsNumber"+id).val());
       if(num<goodsquantity){
          num++;
          $("#goodsNumber"+id).val(num);
           var costs=num*goodscost;
           $("#cost"+id).val(costs);
       }else {
           alert("最大值不能超过库存");
       }

   }
   /*商品数量 输入框 失焦事件*/
   function numJudge(id,goodsquantity){
       var num=parseInt($("#goodsNumber"+id).val());
       if(num>goodsquantity){
           $("#goodsNumber"+id).val(0);
           alert("最大值不能超过库存");
       }
   }
    layui.use(['layer', 'form', 'element', 'table', 'laydate', 'laytpl','jquery'], function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            element = layui.element,
            laydate = layui.laydate,
            laytpl = layui.laytpl,
            jquery = layui.jquery;

        var $ = layui.$;
        var isAdmin;
        /*   form.render();*/
        //数据表格渲染  展示所有订单
        table.render({
            elem: '#marketManage',
            height: 600,
            url: '/aaa/market/getMarketManage',
            page: true,
            cols: [
                [
                    {field: 'school', title: '门店地址', sort: true, align: 'center'},
                    {field: 'expenseorder', title: '订单号', align: 'center'},
                    {field: 'telephone', title: '用户电话', align: 'center'},
                    {field: 'expensetype', title: '消费类型', align: 'center'},
                    {field: 'expensecost',  title: '金额', align: 'center'},
                    {field: 'createtime',  title: '订单时间', sort: true, align: 'center'},
                    {field: 'name',  title: '操作员', align: 'center'},
                    //{field: 'employeeid', title: '操作员编号', align: 'center', style: 'display:none;'},//隐藏 操作员编号 列数据
                    {field: 'employeeid', title: '操作员编号', align: 'center'},//隐藏 操作员编号 列数据
                    {width: 200, title: '操作',toolbar: '#marketManage-bar', align: 'center'},
                ]
            ]
            , done: function (res, curr, count) {//回调函数
                // 隐藏列
                //$(".layui-table-box").find("[data-field='employeeid']").css("display", "none");

                //获取后台返回的isAdmin值(判断是否超管)
                var isAdmin=res.isAdmin;

                /*----------如果是超管-------------*/
                if(isAdmin==1){
                    $("#addMarketManage").css("display","none");
                    table.render({
                        elem: '#marketManage',
                        height: 600,
                        url: '/aaa/market/getMarketManage',
                        page: true,
                        cols: [
                            [
                                {field: 'school', title: '门店地址', sort: true, align: 'center'},
                                {field: 'expenseorder', title: '订单号', align: 'center'},
                                {field: 'telephone', title: '用户电话', align: 'center'},
                                {field: 'expensetype', title: '消费类型', align: 'center'},
                                {field: 'expensecost',  title: '金额', align: 'center'},
                                {field: 'createtime',  title: '订单时间', sort: true, align: 'center'},
                                {field: 'name',  title: '操作员', align: 'center'},
                                {field: 'employeeid', title: '操作员编号', align: 'center'},//隐藏 操作员编号 列数据
                                {width: 200, title: '操作',toolbar: '#marketManage-bar2', align: 'center'},
                            ]
                        ],
                         done: function (res, curr, count) {
                             //$(".layui-table-box").find("[data-field='employeeid']").css("display", "none");
                         }
                    })
                }
            }
        });

        /*搜索*/
        $('.layui-btn').click(function () {
            table.reload('marketManage', {
                url: '/aaa/market/getMarketManage',
                where: {//设定异步数据接口的额外参数
                    telephone: ($("#telephone").val()).trim( ),//用户电话
                    expenseorder: ($("#expenseorder").val()).trim( ),//订单号
                    expensetype: ($("#expensetype").val()).trim( ),//消费类型
                    employeeid: ($("#employeeid").val()).trim( ),//操作员编号
                }
            });
        })

        /*重置搜索栏*/
        $('#resets').click(function () {
            location.reload();
        })

        //监听工具条
        table.on('tool(employee-filter)', function (obj) {//注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data;//获得当前行数据
            if (obj.event === 'marketManage-detail') {//obj.event获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                //查看数据详情
                //数据表格渲染  展示该订单所有商品
                table.render({
                    elem: '#detailMarketForm',
                    url: '/aaa/market/getDetailMarketManage',
                    where: {
                        expenseorder: data.expenseorder//传入订单号参数
                    },
                    page: false,
                    cols: [
                        [
                            {field: 'school', title: '门店地址', align: 'center'},
                            {field: 'expenseorder', title: '订单号', align: 'center'},
                            {field: 'telephone', title: '用户电话', align: 'center'},
                            {field: 'expensetype', title: '消费类型', align: 'center'},
                            {field: 'goodsname', title: '商品', align: 'center'},
                            {field: 'expensecost',  title: '金额', align: 'center'},
                            {field: 'number',  title: '数量', align: 'center'},
                            {field: 'createtime',  title: '订单时间', sort: true, align: 'center'},
                            {field: 'name',  title: '操作员', align: 'center'},
                            {field: 'employeeid', title: '操作员编号', align: 'center'}
                        ]
                    ]
                });

                /*弹出详细信息form表单*/
                layer.open({
                    type: 1,
                    title: '详细信息',
                    shade: 0,
                    anim: 2,
                    maxmin: true,
                    area: ['1300px', '500px'],
                    offset: 'auto',
                    content: $('#detailMarketManage'),
                    btn: ['关闭'],
                    yes: function (index, layero) {
                        layer.close(index); //关闭弹层
                    },
                    shade: 0.3//阴影样式
                });
            } else if (obj.event === 'marketManage-del') {//删除数据
                layer.confirm('确定删除该行数据？', function (index) {
                    $.post({
                        url: '/aaa/market/delMarketByOrderId',
                        data: {
                            expenseorder: data.expenseorder//传入订单号参数
                        },
                    }, function (d) {
                        obj.del();
                        layer.close(index);
                        layer.alert(d.msg, {//提示框
                            icon: 1,
                            skin: 'layer-ext-moon',
                            time: 3000//三秒消失
                        })
                    })
                });
            }
        });



        /*添加新订单弹框*/
        $('#addMarketManage').click(function () {

           /* form.val("addlMarketForm", {//设置弹框内容均为空
                "expenseorderAdd": '',//订单号
                "telephoneAdd": '',//电话号码
                "goodstypeAdd" : 0,//商品类型
                "expensecostAdd": ''//总价
            });*/

            table.render({
                elem: '#entrepotGoods',
                url: '/aaa/market/getEntrepotGoods',
                page: false,
                height: 400,
                width:900,
                where: {
                    goodstypeId:0//传入商品类型参数
                },
                cols: [
                    [
                        {field: 'id', title: '商品编号', align: 'center'},
                        {field: 'goodsname', title: '商品名', align: 'center'},
                        {field: 'goodsquantity', title: '库存数量',align: 'center'},
                        {field: 'goodscost', title: '单价',align: 'center'},
                        {field: 'goodsNumber', title: '购买数量',toolbar: '#goodsNumber', align: 'center', },
                        {field: 'cost', title: '合计',toolbar: '#cost', align: 'center', },
                        {type:'checkbox', name:'checkboxGoods', fixed: 'right'},
                    ]
                ]

            });


            //商品类型选择变化 使 表格列表加载
            form.on('select(goodsTypeAddList)', function(data) {
                table.reload('entrepotGoods', {
                    url: '/aaa/market/getEntrepotGoods',
                    where: {//设定异步数据接口的额外参数
                        'goodstypeId' : data.value//商品类型
                    }
                });
                form.render(); //刷新全部
            });


            /*数据表格复选框 全选 非全选*/
                table.on('checkbox(entrepotGoods)', function(obj){
                var checkStatus = table.checkStatus('entrepotGoods');
                if(checkStatus.isAll){//全选
                    //获取checkbox选中的所有值
                    var checkStatus = table.checkStatus('entrepotGoods'),
                        d = checkStatus.data;
                    //计算总计价格
                    var countCount=0;
                    for (var i=0;i<d.length;i++){
                        $("#goodsNumber"+d[i].id).val(1);//设置购买数量为1
                        $("#cost"+d[i].id).val(d[i].goodscost);//设置合计为单价
                        countCount=countCount+parseInt($("#cost"+d[i].id).val());
                    }
                    $('#expensecostAdd').val(countCount);
                }
                if (obj.checked==true){
                    var id=obj.data.id;//获取选中行id
                    var cost=obj.data.goodscost;//获取选中行单价价格
                    $("#goodsNumber"+id).val(1);//设置购买数量为1
                    $("#cost"+id).val(cost);//设置合计为1
                }else {
                    var id=obj.data.id;//获取选中行id
                    $("#goodsNumber"+id).val(0);//设置购买数量为1
                    $("#cost"+id).val(0);//设置合计为1
                }
                //获取checkbox选中的所有值
                var checkStatus = table.checkStatus('entrepotGoods'),
                    d = checkStatus.data;
                //计算总计价格
                var countCount=0;
                for (var i=0;i<d.length;i++){
                    countCount=countCount+parseInt($("#cost"+d[i].id).val());
                }
                $('#expensecostAdd').val(countCount);
            });

            /*每0.5秒计算一次总价*/
            setInterval(function () {
                //获取checkbox选中的所有值
                var checkStatus = table.checkStatus('entrepotGoods'),
                    d = checkStatus.data;
                //计算总计价格
                var countCount=0;
                for (var i=0;i<d.length;i++){
                    countCount=countCount+parseInt($("#cost"+d[i].id).val());
                }
                $('#expensecostAdd').val(countCount);
            }, 500);

            //弹出form表单
            layer.open({
                type: 1,
                title: '添加订单',
                shade: 0,
                anim: 2,
                maxmin: true,
                area: ['1000px', '700px'],
                /* offset: ['100px', '100px'],//同时定义top、left坐标*/
                offset:'auto',
                id: 'LAY_layuipro',
                content: $('#addMarketManagePop'),
                btn: ['提交', '取消'],
                success: function(layero){
                    $.ajax({
                        type: "POST", //方法类型
                        dataType: "json", //预期服务器返回的数据类型
                        url: "/aaa/market/getNewOrderNumber",
                        traditional : true,
                        success: function (result) {
                            $('#expenseorderAdd').val(result.msg);
                            $("#telephoneAdd").val('');
                        }

                    });
                },
                yes: function (index, layero) {
                    //点击提交按钮把form表单信息提交给后台
                    document.getElementById("addSubmit").click();
                },
                btn2: function (index, layero) {
                    /*document.getElementById("noAddSubmit").click();*/
                    layer.close(index);
                },
                shade: 0.3//阴影样式
            });
        });


        /*点击提交 添加订单*/
        form.on('submit(addSubmit)', function (data) {
            var phone=($('#telephoneAdd').val()).trim();
            if (phone == '' || phone == null) {
                layer.msg('请填写手机号', {
                    icon : 5,
                    anim : 6
                });
                //阻止表单跳转。
            }
            //获取checkbox选中的值
            var checkStatus = table.checkStatus('entrepotGoods'),
            d = checkStatus.data;

            if(d.length==0){
                layer.msg('请选择要购买的物品', {
                    icon : 5,
                    anim : 6
                });
                return false;
            }
            //获取全部的 购买数量
            var arrgoodsNumber = new Array();
            for (var i = 0; i < d.length; i++) {
                arrgoodsNumber[i]=({"goodsNumber":$("#goodsNumber"+d[i].id).val()});

            }

            //获取全部的 合计
            var arrcost = new Array();
            for (var i = 0; i < d.length; i++) {
                arrcost[i] = ({"cost":$("#cost"+d[i].id).val()});
            }

            /*将需要传给后台的值(订单号,电话号码,商品表,选中的商品的数量,每种商品的合计价格)装入一个array*/
            var array = new Array();
            array.push([{"expenseorder":$("#expenseorderAdd").val()}]);
            array.push([{"telephone":$("#telephoneAdd").val()}]);
            array.push(d);
            array.push(arrgoodsNumber);
            array.push(arrcost);

            $.ajax({
                type: "POST", //方法类型
                dataType: "json", //预期服务器返回的数据类型
                url: "/aaa/market/addMarketManage", //url 数据添加到数据库
                contentType: 'application/json; charset=utf-8',//注意
               // traditional : true,
                data:JSON.stringify(array),
                success: function (result) {
                    if (result.code == 100) {
                        layer.msg("添加成功");
                        $("#telephoneAdd").val('');
                        layer.closeAll('page'); //关闭弹出框
                        table.reload('marketManage'); //主页面重新加载数据
                    } else {
                        layer.msg("添加失败");
                    }
                },
                error: function () {
                    layer.msg("系统异常");
                    layer.closeAll('page'); //关闭弹出框
                }
            });
            return false; //阻止表单跳转。
        });


    });

</script>
</body>
</html>